<script setup lang="ts">
interface IProps {
  mode?: string;
  startText?: string;
  endText?: string;
  selected?: any[];
  date?: string;
  startDate?: string;
  endDate?: string;
  color?: string;
  round?: number;
  title?: string;
}

const props = withDefaults(defineProps<IProps>(), {
  mode: 'single',
  startText: '开始',
  endText: '结束',
  selected: () => [],
  startDate: time.format(new Date(2010, 0, 1), time.FORMATS.ISO_DATE),
  endDate: time.format(time.add(new Date(), 10, 'year'), time.FORMATS.ISO_DATE),
  color: '',
  round: 16,
});

const appStore = useAppStore();

const emit = defineEmits<{
  confirm: [value: any];
  close: [];
}>();

// 使用计算属性获取主题颜色，如果没有传入则使用默认值
const calendarColor = computed(() => props.color || appStore.theme.color.main);

// 内部日历引用
const calendarsRef = ref<any>(null);

// 暴露 open 方法
const open = () => {
  calendarsRef.value?.open();
};

// 暴露 close 方法
const close = () => {
  calendarsRef.value?.close();
};

const onConfirm = (value: any) => {
  emit('confirm', value);
};

const onClose = () => {
  emit('close');
};

// 暴露方法给父组件
defineExpose({
  open,
  close,
});
</script>

<template>
  <uv-calendars
    ref="calendarsRef"
    :mode="mode"
    :date="date"
    :title="title"
    :start-text="startText"
    :end-text="endText"
    :selected="selected"
    :start-date="startDate"
    :end-date="endDate"
    :color="calendarColor"
    :round="round"
    @confirm="onConfirm"
    @close="onClose"
  />
</template>
